<template>
  <div class="search-wrap">
    <div class="search-key">
      <img src="../../images/back.png" class="pic1" @click="toBack"/>
      <div class="key-box">
        <input class="key" placeholder="请输入企业名称" maxlength="15" v-model="keyword"/>
        <img src="../../images/close.png" class="pic4" v-show="showIcon" @click="del"/>
        <img src="../../images/search.png" class="pic2" @click="search"/>
      </div>
    </div>

    <div class="search-tip">{{title}}</div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      class="work-van" v-if="showPage == 1"
    >
      <div class="search-work">
        <work-info :itemList="workList" @openRecruit="openRecruit"></work-info>
      </div>
    </van-list>

    <div class="search-result" v-if="showPage == 2">
      <result-page></result-page>
    </div>

    <div class="search-box" v-if="showPage == 0 && hisItem.length > 0">
      <div class="search-con" v-for="(item,index) in hisItem" :key="index" @click="queryWork(item)">
        <span>{{item}}</span>
      </div>

      <div class="clear-box" @click="clear">
        <img src="../../images/delete.png" class="pic3"/>
        <span class="clear-title">清除历史记录</span>
      </div>
    </div>

  </div>
</template>

<script>
  import resultPage from "../../components/resultpage"
  import workInfo from "../../components/workinfo"
  import {queryWorkList} from '../../axios/api'

  export default {
    data() {
      return {
        title: '历史搜索',
        showPage: 0,
        keyword: "",
        showIcon: false,
        hisTime: [],//搜索时间
        hisItem: [],//搜索内容,
        workList: [],
        page: 1,
        size: 20,
        userSign: "",
        loading: false,
        finished: false,
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      onLoad() {//异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.getWorkList();
            this.timer = null;
          }, 500)
        }
      },
      getWorkList() {//查询招聘列表
        const params = {
          mechanismAddress: '',
          page: this.page,
          size: this.size,
          mechanismName: this.keyword,
          orderType: ''
        };

        queryWorkList(params).then(res => {
          this.title = "搜索结果";
          if (res.data.workList != null && res.data.workList.length > 0) {
            this.showPage = 1;
            this.workList = this.workList.concat(res.data.workList);
            //加载状态结束
            this.loading = false;
            this.page++;
          } else {
            if (this.loading) {
              this.loading = false;
              if (this.workList.length >= res.data.workList.length) {
                this.finished = true;
              }
            } else {
              this.showPage = 2;
            }
          }
        });
      },
      toBack() {
        this.$router.go(-1);
      },
      clear() {//清除
        for (let i = 0; i < this.hisTime.length; i++) {
          localStorage.removeItem(this.hisTime[i]);
        }
        this.showPage = 0;
        this.init();
      },
      del() {//删除
        this.keyword = "";
        this.showIcon = false;
      },
      search() {//搜索
        if (this.keyword == "" || this.keyword == undefined || this.keyword == null) {
          this.$vux.toast.text("请输入搜索的企业名称", "middle");
          return;
        }
        let key = (new Date()).getTime();
        let flag = this.findArray(this.keyword, this.hisItem);
        if (flag) {//输入的内容localStorage有记录
          for (let i = 0; i < localStorage.length; i++) {
            if (this.keyword == localStorage.getItem(localStorage.key(i))) {
              localStorage.removeItem(localStorage.key(i));
            }
          }
          localStorage.setItem(key, this.keyword);
        } else {
          if (this.hisItem.length >= 5) {
            localStorage.removeItem(this.hisTime[0]);
            localStorage.setItem(key, this.keyword);
          } else {
            localStorage.setItem(key, this.keyword)
          }
        }
        //初始化
        this.page = 1;
        this.size = 20;
        this.workList = [];
        this.getWorkList();
        this.init();
      },
      init() {//初始化
        this.hisTime = [];
        this.hisItem = [];
        for (let i = 0; i < localStorage.length; i++) {
          if (!isNaN(localStorage.key(i))) {
            this.hisItem.push(localStorage.getItem(localStorage.key(i)));
            this.hisTime.push(localStorage.key(i));
            this.showPage = 0;
          }
        }
        this.hisItem = this.hisItem.reverse();
      },
      findArray(index, array) {
        for (let i = 0; i < array.length; i++) {
          if (array[i] === index) {
            return true;
          }
        }
      },
      queryWork(name) {
        this.keyword = name;
        this.page = 1;
        this.size = 20;
        this.workList = [];
        this.getWorkList();
      },
      openRecruit(id) {//詳情
        this.$router.push({path: "/workdetail", query: {"id": id}});
      }
    },
    watch: {
      keyword() {
        if (this.keyword == "" || this.keyword == undefined || this.keyword == null) {
          this.showIcon = false;
        } else {
          this.showIcon = true;
        }
        this.showPage = 0;
      }
    },
    components: {
      resultPage,
      workInfo
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .search-wrap {
    .who(100%, 100%, hidden);
    .search-key {
      .wh(100%, 1.2rem);
      display: flex;
      align-items: center;
      .pic1 {
        margin-right: 0.28rem;
        margin-left: 0.32rem;
        .wh(0.48rem, 0.48rem);
      }
      .key-box {
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 0.32rem;
        height: 0.8rem;
        background: rgba(242, 242, 242, 1);
        .border-radius(0.387rem);
        .key {
          margin-left: 0.32rem;
          .wh(85%, 0.5rem);
          line-height: 0.5rem;
          .size-color(0.373rem, rgba(191, 191, 191, 1));
          background: rgba(242, 242, 242, 1);
        }
        .pic2 {
          margin-left: auto;
          margin-right: 0.32rem;
          .wh(0.48rem, 0.48rem);
        }
        .pic4 {
          margin-right: 0.347rem;
          .wh(0.48rem, 0.48rem);
        }
      }
    }
    .search-tip {
      display: flex;
      align-items: center;
      padding-left: 0.32rem;
      .wh(100%, 0.8rem);
      .size-color(0.347rem, rgba(153, 153, 153, 1));
    }
    .search-box {
      .wh(100%, auto);
      .search-con {
        display: flex;
        align-items: center;
        margin-left: 0.32rem;
        .wh(96.8%, 1.2rem);
        border-bottom: @talent-border-bottom;
        .size-color(0.4rem, rgba(51, 51, 51, 1));
      }
      .clear-box {
        display: flex;
        align-items: center;
        margin-left: 0.32rem;
        margin-top: 0.453rem;
        width: 3rem;
        .pic3 {
          .wh(0.373rem, 0.373rem);
        }
        .clear-title {
          margin-left: 0.24rem;
          .size-color(0.347rem, rgba(153, 153, 153, 1));
        }
      }
    }
    .search-result {
      .fj(center, center);
      margin-top: 1.707rem;
    }
  }
</style>
